/*!
 * @author Isis (igraziatto) Graziatto <isis.g@vanillaforums.com>
 * @copyright 2009-2018 Vanilla Forums Inc.
 * @license GPL-2.0-only
 */

@import "../mixins/mixins";

/* -------------------------------------------------------------- *\
    Styles
\* -------------------------------------------------------------- */

@mixin icon() {
    display: inline-block;
    min-width: 1em;
    font-family: vanillicon;
    font-variant: normal;
    font-weight: normal;
    font-style: normal;
    text-align: center;
    text-decoration: inherit;
    text-transform: none;
    line-height: inherit;
    color: inherit;
    -webkit-font-smoothing: antialiased;
}

.Sprite,
.Sprite16,
.ReactSprite,
.SpFlyoutHandle {
    width: auto;
    height: auto;
    background-image: none !important;

    &::before {
        @include icon;
        min-width: 1em;
        text-align: center;
    }
}

.ReactSprite {
    &::before {
        font-size: 14px;
    }
}

.SpFlyoutHandle {
    cursor: pointer;
}

.RSS {
    a {
        @include icon;
    }
    img {
        display: none;
    }
}

.SpEditProfile::before {
    content: $icon-user;
}

.SpDropdownHandle::before {
    content: $icon-caret-down;
}

.SpDiscussions::before {
    content: $icon-discussion;
}

.SpActivity::before {
    content: $icon-time;
}

.SpDelete::before {
    content: $icon-remove;
}

.SpFlyoutHandle::before {
    @include kbicon;
    content: $kbicon-gear;
}

.SpOptions::before {
    content: $icon-cog;
}

.SpPreferences::before {
    content: $icon-cog;
}

.SpPassword::before {
    content: $icon-lock;
}

.SpSearch::before {
    content: $icon-search;
}

.RSS a::before {
    content: $icon-rss;
}

// Reactions
.ReactPromote::before {
    content: $icon-hand-up;
}

.ReactOffTopic::before {
    content: $icon-meh;
}

.ReactInsightful::before {
    content: $icon-lightbulb;
}

.ReactDisagree::before {
    content: $icon-frown;
}

.ReactAgree::before {
    content: $icon-smile;
}

.ReactDislike::before {
    content: $icon-thumbs-down;
}

.ReactLike::before {
    content: $icon-thumbs-up;
}

.ReactDown::before {
    content: $icon-arrow-down;
}

.ReactUp::before {
    content: $icon-arrow-up;
}

.ReactWTF::before {
    content: $icon-wtf;
}

.ReactAwesome::before {
    content: $icon-heart;
}

.ReactLOL::before {
    content: $icon-lol;
}

.ReactFlag::before {
    content: $icon-flag;
}

.ReactAbuse::before {
    content: $icon-exclamation-sign;
}

.ReactSpam::before {
    content: $icon-spam;
}

.ReactQuote::before {
    content: $icon-quote;
}

.ReactMessage::before {
    content: $icon-mail;
}

.ReactWarn::before {
    content: $icon-warn;
}

.ReactFacebook::before {
    content: $icon-facebook-alt;
}

.ReactFacebook:hover {
    &::before {
        color: #3a5795;
    }
}

.ReactTwitter::before {
    content: $icon-twitter;
}

.ReactTwitter:hover {
    &::before {
        color: #55acee;
    }
}

.ReactGooglePlus::before {
    content: $icon-google-plus-alt;
}

.ReactGooglePlus:hover {
    &::before {
        color: #dd4b39;
    }
}

.RSS {
    a {
        color: #f26522;
    }
}

@if ($staticVariables) {
    .ReactButton.PopupWindow {
        &:hover {
            .Sprite::before {
                color: $global-color_primary;
            }
        }
    }
}

.Button.Handle .Sprite,
.NavButton.Handle .Sprite {
    position: static;
    border: 0;
    vertical-align: baseline;
}

.Handle > .SpEditProfile,
.NavButton > .SpEditProfile {
    width: auto;
    height: auto;
    vertical-align: baseline;
    line-height: inherit;
}

.Options {
    .Bookmark,
    .SpFlyoutHandle {
        display: inline-block;
        padding: 0;

        &::before {
            font-size: $global-base_lineHeight;
        }
    }

    .AdminCheck .icheckbox::before {
        vertical-align: top;
    }
}

.OptionsMenu {
    font-size: $global-medium_fontSize;
}

.OptionsTitle {
    @include sr-only;
    font-size: inherit !important; // The title will be properly hidden with the sr-only mixin, but it needs a font size to be detectable by the screen reader.
}

.SocialIcon {
    border-radius: $formButton_borderRadius;
    height: $theme-photo-small_size;
    width: $theme-photo-small_size;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.SocialIcon-MicrosoftAccount {
    background-color: $global-color_primary;
    &:active,
    &:focus,
    &:hover {
        background-color: $global-color_primaryAlt;
    }
}

.Methods,
.Panel,
.Navigation,
.MeBox {
    .SocialIcon:not(.SocialIcon-OpenID) .Icon {
        background: none;
        text-align: center;
    }

    .SocialIcon:not(.SocialIcon-OpenID) .Icon::before {
        @include icon;
        font-size: $global-medium_fontSize;
        color: $global-color_white;
    }

    .SocialIcon-Facebook .Icon::before {
        content: $icon-facebook-alt;
    }

    .SocialIcon-Twitter .Icon::before {
        content: $icon-twitter-alt;
    }

    .SocialIcon-Google .Icon::before {
        content: $icon-google-plus-alt;
    }

    .SocialIcon-LinkedIn .Icon::before {
        content: $icon-linkedin-alt;
    }

    .SocialIcon-MicrosoftAccount .Icon::before {
        content: $icon-windows-alt;
    }

    .SocialIcon-Steam .Icon::before {
        left: 1px;
    }
}

.MeBox {
    .Arrow {
        display: none;
    }
}

a.Bookmark {
    width: auto;
    height: auto;
    font: 0/0 a;
    color: transparent;
    text-indent: 0;
    background-image: none !important;

    &::before {
        @include icon;
        font-size: $global-base_lineHeight;
        color: $global-color_primary;
        content: $icon-star-empty;
    }

    &:hover::before {
        @if ($staticVariables) {
            color: $global-color_primaryAlt;
        }
    }
}

a.Bookmarked {
    &::before,
    &:hover::before {
        color: #e5b951 !important;
        content: $icon-star;
    }
}

/*=====  End of Vanillicon  ======*/
